<template>
  <div class="organ" :class="{'active': isShowAccountList}">
    <div class="account-select">
      <img src="../../assets/images/account.png" alt="">
      <div class="account-close" @click="closeAccount">
        <i class="close-left"></i>
        <i class="close-right"></i>
      </div>
      <div class="account-main">
        <tree ref="tree"
              slot="drawerBody"
              :data="tree"
              :isMultiple="false"
              :searchFrontEnd="false"
              @onopen="treeNodeOpen"
              @oncheck="onTreeCheck"
              @queryTree="queryTreeByKey"></tree>
      </div>
    </div>
    <div class="matter"></div>
  </div>
</template>
<script>
import clickoutside from './../../utils/directive/clickoutside'
import Tree from './../../components/Tree.vue'
// import {queryTreeByKey, loadOrganTree, querySubTreeById} from '../../api/organ.js'
import { treeAdapter, dataToTree, treeReset } from '../../utils/organTree.js'
export default {
  name: 'organ',
  directives: {
    clickoutside
  },
  components: {
    Tree
  },
  props: {
    isShowAccountList: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      searchMsg: '',
      tree: {
        name: '无任何记录',
        id: null,
        resName: '',
        hide: false,
        isFolder: false,
        isOpen: true,
        disabled: true,
        children: []
      },
      treeFirstData: null,
      treeNode: {
        id: this.value
      },
      message: '',
      selectOrganId: '',
      selectOrganModel: ''
    }
  },
  methods: {
    // 关闭选择
    closeAccount () {
      this.$parent.closeAccount()
      this.$refs.tree.clearKeyWord()
    },
    loadOrganTree (type) {
      this.commonApi.loadOrganTree().then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.treeFirstData = data
          if (data.length > 0) {
            this.message = data[0]['organName']
            dataToTree(data, this.tree)
            this.treeNode.organId = this.tree.id
            this.treeNode.orgType = this.tree.orgType
            // this.$refs.tree.selected = [this.tree.id]
            this.onTreeCheck(this.tree.id, data[0], type)
          } else {
            if (!type) {
              this.$emit('listenTreeId', '', '', 'abnormal')
            }
          }
        } else {
          // this.showToast('加载组织机构树失败')
          if (!type) {
            this.$emit('listenTreeId', '', '', 'abnormal')
          }
          treeReset(this.tree)
        }
      }, res => {
        // this.showToast('系统出小差了，加载组织机构树失败')
        if (!type) {
          this.$emit('listenTreeId', '', '', 'abnormal')
        }
        treeReset(this.tree)
      })
    },
    treeNodeOpen (id, model, type) {
      if (model === undefined || model.children === undefined || model.children.length < 1) {
        this.commonApi.querySubTreeById(id, 'exclusionOrgTypes').then((res) => {
          if (res.data.code === '0') {
            if (res.data.data.length > 0) {
              treeAdapter(res.data.data).forEach((item) => {
                model.children.push(item)
              })
              this.$nextTick(function () {
                if (type === 'init') {
                  res.data.data[0].name = res.data.data[0]['organName']
                  this.$emit('listenTreeId', res.data.data[0].organId, res.data.data[0])
                  this.selectOrganId = res.data.data[0].organId
                  this.selectOrganModel = res.data.data[0]
                  this.message = res.data.data[0]['organName']
                  this.$refs.tree.selected = [res.data.data[0].organId]
                } else if (type === 'keyWord') {
                  this.$refs.tree.selected = [this.selectOrganId]
                }
              })
            } else {
              model.isFolder = false
              // this.showToast('没有查询到数据')
            }
          } else {
            // let msg = res.data.msg ? res.data.msg : '系统出小差了'
            // this.showToast(msg)
          }
        }, res => {
          // this.showToast('系统出小差了')
        })
      }
    },
    onTreeCheck (id, model, type) {
      this.treeNode.organId = id
      if (!id) {
        id = this.treeFirstData[0]['organId']
      }
      if (id === 0 || id === 1 || id === -1) {
        if (!type) {
          type = 'init'
        }
        if (!model) {
          if (this.tree.id === id) {
            // 是否是第一层
            this.tree.disabled = true
            this.tree.focus = false
            this.tree.hide = false
            this.tree.isFolder = true
            this.tree.isOpen = true
            this.treeNodeOpen(id, this.tree, type)
          } else {
            // 是否是第二层
            this.tree.children[0].disabled = true
            this.tree.children[0].focus = false
            this.tree.children[0].hide = false
            this.tree.children[0].isFolder = true
            this.tree.children[0].isOpen = true
            this.treeNodeOpen(id, this.tree.children[0], type)
          }
        } else {
          this.treeNodeOpen(id, model, type)
        }
      } else {
        if (!model) {
          model = {
            name: this.message
          }
        }
        if (model) {
          this.message = model['name']
        }
        if (type) {
          // 当是删除关键字的时候，不需要回调listenTreeId,并把选中organId选中
          this.$refs.tree.selected = [this.selectOrganId]
        } else {
          this.$refs.tree.selected = [id]
          this.$emit('listenTreeId', id, model, type)
          this.selectOrganId = id
          this.selectOrganModel = model
          this.$refs.tree.clearKeyWord()
        }
      }
      if (model) { this.treeNode.orgType = model.orgType }
      this.treeNode.model = model
    },
    queryTreeByKey (keyword) {
      if (!keyword) {
        this.loadOrganTree('keyWord')
        return
      }
      // 如果keyword不为空，queryTreeByKey
      this.commonApi.queryTreeByKey(keyword, 'exclusionOrgTypes').then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          dataToTree(data, this.tree)
        } else {
          // this.showToast('加载组织机构树失败')
          treeReset(this.tree)
        }
      }, res => {
        // this.showToast('系统出小差了，加载组织机构树失败')
        treeReset(this.tree)
      })
    },
    // 根据model选中树
    selectOrgan (organId, organModel) {
      this.selectOrganId = organId
      this.selectOrganModel = organModel
      this.$refs.tree.selected = [organId]
      if (organModel) {
        this.message = organModel.name
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss">
.organ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  &.active{
    z-index: 500;
    opacity: 1;
  }
}
.account-select{
  width: 30%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  overflow: hidden;
  img{
    width: 100%;
    display: block;
  }
  .account-close{
    position: absolute;
    right: 4.1%;
    top: 4.5%;
    width: 16px;
    height: 16px;
    z-index: 20;
    cursor: pointer;
    i{
      width: 16px;
      height: 2px;
      display: block;
      background: #3d76fb;
    }
    .close-left{
      transform-origin: 50% 50%;
      transform: rotateZ(135deg) translate(4px, -5px);
    }
    .close-right{
      transform: rotateZ(45deg) translate(4px, 3px);
    }
  }
  .account-main{
    position: absolute;
    top: 0;
    left: 7.32%;
    width: calc(100% - 7.32% - 6.12%);
    height: 100%;
    overflow: hidden;
    & /deep/ .tree{
      margin: calc(4.5% + 22px) 0 0;
      height: calc(100% - 4.5% - 22px - 8%)!important;
      overflow: hidden;
    }
    & /deep/ .search-container{
      width: 100%;
      height: 9.2%;
      margin: 0;
    }
    & /deep/ .tree-container{
      width: 100%;
      height: calc(100% - 9.2% - 10px);
      max-height: none;
      overflow: auto;
      margin: 10px 0 0 0!important;
      padding: 10px 8px 10px 14px;
      overflow-x: hidden;
      box-sizing: border-box;
      border: 1px solid #3e77fa;
      .tree-content{
        &::-webkit-scrollbar{
          background-color: transparent;
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #0f4199;
          border-radius: 8px;
        }
        &::-webkit-scrollbar-button {
          background-color: transparent;
          height:5px;
        }
        &::-webkit-scrollbar-corner {
          background-color: #fff;
        }
        &::-webkit-scrollbar-arrow-color {
          background-color: #fff;
        }
        & /deep/ .name{
          color: #a0c9fe;
          font-size: 14px;
        }
        & /deep/ .plus:before{
          margin-top: 2px;
          border-left-color: #a0c9fe;
        }
      }
      .arrow{
        text-align: center;
      }
    }
  }
}
.matter{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
</style>
